<!-- 基于mxGraph 创建可拖拽的图形 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mxGraph Topology Editor</title>
    <!-- 引入mxGraph的CSS和JS文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mxgraph/javascript/src/css/common.css">
    <script src="https://cdn.jsdelivr.net/npm/mxgraph/javascript/mxClient.js"></script>
</head>
<body>
    <!-- 创建图形容器 -->
    <div id="graphContainer" style="width: 800px; height: 600px; border: 1px solid lightgray;"></div>
    
    <script>
        // 在页面加载完成后执行
        window.onload = function() {
            // 如果不是IE浏览器，则继续执行（mxGraph不支持IE）
            if (!mxClient.isBrowserSupported()) {
                mxUtils.error('Browser is not supported!', 200, false);
            } else {
                // 创建图形编辑器
                var graph = new mxGraph(document.getElementById('graphContainer'));
                
                // 禁用浏览器内置的选中和拖拽功能（可选）
                graph.setEnabled(false);
                graph.setConnectable(true);
                graph.setMultigraph(false);
                graph.setAllowDanglingEdges(false);
                
                // 创建默认样式（可选）
                var style = graph.getStylesheet().getDefaultVertexStyle();
                style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
                
                // 启用拖拽功能（mxGraph默认启用，这里只是强调）
                graph.setCellsDraggable(true);
                
                // 添加节点和边到图形编辑器（示例）
                var parent = graph.getDefaultParent();
                var v1 = graph.insertVertex(parent, null, 'Node 1', 20, 20, 80, 30);
                var v2 = graph.insertVertex(parent, null, 'Node 2', 200, 150, 80, 30);
                var e1 = graph.insertEdge(parent, null, '', v1, v2);
            }
        };
    </script>
</body>
</html>